<style>
  .chess-home{
    width: 100%;
  }
  .chess-banner{
    width: 100%;
    height: 60px;
    background-color: lightblue;
  }
  .content-row{
    width: 100%;
    height: 760px;
    background-color: aquamarine;
  }
  .chess-left{
    width: 360px;
    height: 100%;
    float: left;
  }
  .chess-board{
    float: left;
  }
  .chess-right{
    height: 100%;
    float: left;
  }
  .chess-footer{
    width: 100%;
    height: 160px;
    background-color: burlywood;
  }
</style>

<template>
  <div class="chess-home">
    <div class="chess-banner"></div>
    <div class="content-row">
      <div class="chess-left"></div>
      <div class="chess-board"><chessboard/></div>
      <div class="chess-right"></div>
    </div>
    <div class="chess-footer"></div>
  </div>
</template>

<script>
  import chessboard from '@/components/chessboard'
  export default {
    name: 'piece',
    data () {
      return {
      }
    },

    components: {
      chessboard,
    },

    computed :{
      style() {
        let x = this.location.x - POINT_RADIUS;
        let y = this.location.y - POINT_RADIUS;
        return {top: y + 'px', left: x + 'px'};
      },
    },

    created: function () {
      console.log('crate chess home.')
    },

    methods: {
      point_click: function () {
        console.log(this.id);
      }
    }
  }
</script>
